<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>上传图片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../default/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <style>
        body {
            background: #f2f2f2;
        }

        header a {
            color: #fff;
        }

        .mui-bar .mui-title {
            color: #fff;
        }

        .mui-content {
            background: #f2f2f2;
        }

        .mui-bar-nav ~ .mui-content {
            padding-bottom: 50px;
        }

        .mui-bar-transparent {
            background: rgba(255, 219, 40, 0);
        }

        .mui-content {
            padding-bottom: 50px;
        }

        /*样式覆盖*/
        .task-maseg {
            text-align: center;
            margin: 80px auto;
        }

        /*重写样式-美化*/
        .mui-input-row label {
            font-size: 14px;
        }

        .hidden {
            display: none;
        }

        .gradient1, .gradient2, .gradient3 {
            position: relative;
            display: block;
            width: 200px;
            text-align: center;
            margin: 0 auto;
            height: auto;
            min-height: 200px;
            background: url("https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/icon/icone_index1.png") no-repeat;
            background-size: 100%;
        }

        .mui-radio .mui-badge {
            position: absolute;
            position: absolute;
            top: 10px;
            right: 50px;
        }
        .task-type{
            display: none;
        }
        .task-type1{
            display: none;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-transparent">
    <a class="mui-icon mui-icon-left-nav mui-pull-left back-tohost"></a>
    <h1 class="mui-title">上传图片</h1>
</header>

<div class="mui-content">
    <div class="order-type-tit-box">
        <div class="mui-row">
            <div class="mui-col-sm-12 mui-col-xs-12">
                <div class="task-maseg">
                    <h4>任务名称: <b id="taskName">--</b></h4>
                    <h4>任务金额: ￥<b id="taskAmount">--</b></h4>
                </div>
            </div>
        </div>
    </div>

    <div class="mui-card pading10-15 border-radius15">
        <form>
            <div class="task-type1">
            <h5>请上传图片</h5>
            <div class="mui-input-row mui-radio">
                <label>截图</label>
                <!--<input name="radio1" type="radio" id="wecathbuy" value="1">-->
                <!--<span class="mui-badge mui-badge-danger">￥1</span>-->
            </div>
            <div class="mui-card pading10-15 border-radius15">
                <h5>选择图片</h5>
                <!--<div class="mui-text-center">
                    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/icon/icone_index1.png" for="chooseImg" alt="" width="50%">
                    <input type="file" name="file" id="chooseImg" accept="image/jpg,image/jpeg,image/png" class="hidden" onchange="selectImage(this)">
                </div>-->
                <label title="上传图片" for="multipartFile" class="gradient1">
                </label>
                <input type="file" name="" id="multipartFile" accept="image/*" class="hidden">
            </div>
            </div>
            <div class="task-type">
                <div class="mui-card pading10-15 border-radius15">
                    <h5>选择图片</h5>
                    <!--<div class="mui-text-center">
                        <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/icon/icone_index1.png" for="chooseImg" alt="" width="50%">
                        <input type="file" name="file" id="chooseImg" accept="image/jpg,image/jpeg,image/png" class="hidden" onchange="selectImage(this)">
                    </div>-->
                    <label title="上传图片" for="multipartFile1" class="gradient2">
                    </label>
                    <input type="file" name="" id="multipartFile1"  accept="image/*" class="hidden">
                </div>
            </div>

        </form>
    </div>

    <div class="pading10-15" id="subm-this-order-box">
        <button type="button" class="mui-btn mui-btn-warning cash-withdrawal-btn subm-this-order">立即上传</button>
    </div>


</div>


<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/lrz.min.js" type="text/javascript" charset="utf-8"></script>

<script>
    mui.init();

    // ajax地址

    var quantityOfTime;
    var msg;
    var multipartFile;
    var multipartFile1=null;

    // 获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }

    //获取url中的targetId参数
    var taskid = getUrlParam('taskid');
    console.log(taskid);

    function preview1(obj) {

        lrz(obj.files[0],{width:550,fieldName:"file"}).then(function(data) {

            var filename = "头像.jpg";
            var arr = data.base64.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
//            //转换成file对象
            var file = new File([u8arr], filename, {type: mime});
//            cas.toBlob(function (e) {
//                var files = new window.File([e], filename, {type: e.type});
            console.log('file', file);  //生成Blob的图片格式
            multipartFile=file;
            // multipartFiles.push(file);
            // console.log(file);
            var img = new Image(), url = img.src = URL.createObjectURL(file);
            var $img = $(img);
            img.onload = function () {
                URL.revokeObjectURL(url)
                $('.gradient1').empty().append($img)
            }

        }).then(function(data) {

        }).catch(function(err) {
            console.log(err);
        });

    }

    function preview2(obj) {
        lrz(obj.files[0],{width:550,fieldName:"file"}).then(function(data) {


            var filename = "头像1.jpg";
            var arr = data.base64.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
//            //转换成file对象
            var file = new File([u8arr], filename, {type: mime});
//            cas.toBlob(function (e) {
//                var files = new window.File([e], filename, {type: e.type});
            console.log('file', file);  //生成Blob的图片格式
            multipartFile1=file;
            var img = new Image(), url = img.src = URL.createObjectURL(file);
            var $img = $(img);
            img.onload = function () {
                URL.revokeObjectURL(url)
                $('.gradient2').empty().append($img)
            }

        }).then(function(data) {

        }).catch(function(err) {
            console.log(err);
        });

    }


    $(function () {

        taskJudgement();
        hiedtack();
        mui('body').on('change', '#multipartFile', function (e) {
            preview1(this);
        });
        mui('body').on('change', '#multipartFile1', function (e) {
            preview2(this)
        });
        // 执行任务
        taskTypeController();

    });



    function taskJudgement() {
        if(taskid==3){
            $.ajax({
                url: website + '/ForwardController/findByUserId5',
                type: 'POST',
                data: {
                    "userId": userId,
                    "id":taskid
                },
                success: function (data) {

                    if(data.msg == '有'){
                        mui.toast('这个任务已经做过了!');
                        setTimeout(function () {
                            mui.openWindow({
                                url: "task.html"
                            });
                        },1000);
                        return false;
                    }

                }
            });
        }else{
            $.ajax({
                url: website + '/ForwardController/findByUserId4',
                type: 'POST',
                data: {
                    "userId": userId,
                    "taskTypeId":taskid
                },
                success: function (data) {
                    if(data.msg != '未做'){
                        mui.toast('这个任务已经做过了，请明天再来吧!');
                        setTimeout(function () {
                            mui.openWindow({
                                url: "task.html"
                            });
                        },1000);
                        return false;
                    }
                }
            });
        }
    }
    function hiedtack() {
        if(taskid==1){
            $(".task-type1").show();
        }else {
            $(".task-type1").hide();
            $(".task-type").hide();
        }
    }

    // 任务1
    function taskTypeController() {
        $.ajax({
            url: website + '/TaskTypeController/findById',
            type: 'POST',
            data: {
                "id": taskid
            },
            success: function (data) {
                console.log(data);
                $("#taskName").html(data.data.taskName);
                $("#taskAmount").html(data.data.taskAmount);
            }
        });
    };



    // 显示
    mui("#subm-this-order-box").on('tap', '.subm-this-order', function () {
        var gradient1 = $(".gradient1").children();
        var gradient2 = $(".gradient2").children();
        if (taskid==1 && gradient1.length==0) {
            mui.toast("请上传截图");
            return;
        }else {

            mui.showLoading("图片上传可能缓慢，请耐心等待", "div");
            var formData = new FormData($('form')[0]);
            formData.append('userId', userId);
            formData.append('taskTypeId', taskid);

            formData.append('multipartFile', multipartFile);
            formData.append('multipartFile1', multipartFile1);

            $.ajax({
                url: website + '/ForwardController/addForward',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(data);
                    mui.hideLoading();
                    mui.toast("上传成功，请等待后台审核");
                    setTimeout(function () {
                        mui.openWindow({
                            url: 'task.html'
                        });
                    }, 1000)

                }
            });
        }


    });




    mui("header").on('tap', '.back-tohost', function () {
        mui.openWindow({
            url: 'task.html',
        });
    });



</script>
</body>
</html>